<template>
	<view class="content" :style="{background: `url(${imgPath}storage/home/home_bg.png)`}">
		<view class="top">
			<view class="box">
				<view class="swiper">
					<u-swiper :list="list"></u-swiper>
				</view>
				<view class="scenic-spot">
					<view class="temple">
						<view class="temple-item" @click="goMap">
							<view class="temple-img">
								<u--image :showLoading="true" :src="imgPath + 'storage/home/home1.png'" width="106rpx"
									height="102rpx"></u--image>
							</view>
							<view class="temple-title">
								寺庙导航
							</view>
						</view>
						<view class="temple-item" @click="goTemplelist">
							<view class="temple-img">
								<u--image :showLoading="true" :src="imgPath + 'storage/home/home2.png'" width="106rpx"
									height="102rpx"></u--image>
							</view>
							<view class="temple-title">
								寺庙列表
							</view>
						</view>
						<view class="temple-item" @click="goSesameoil">
							<view class="temple-img">
								<u--image :showLoading="true" :src="imgPath + 'storage/home/home3.png'" width="106rpx"
									height="102rpx"></u--image>
							</view>
							<view class="temple-title">
								灯杆冠名
							</view>
						</view>
						<view class="temple-item" @click="goMeritsrank">
							<view class="temple-img">
								<u--image :showLoading="true" :src="imgPath + 'storage/home/home4.png'" width="106rpx"
									height="102rpx"></u--image>
							</view>
							<view class="temple-title">
								功德榜
							</view>
						</view>
					</view>
					<view class="scenic">
						<view class="scenic-left"
							:style="{background: `url(${imgPath}storage/home/btn_left.png)`,backgroundSize: '100% 100%'}"
							@click="goAnnouncement">
							<view class="scenic-title">
								景区公告
							</view>
							<view class="scenic-text">
								注意事项 游览须知
							</view>
						</view>
						<view class="scenic-right"
							:style="{background: `url(${imgPath}storage/home/btn_right.png)`,backgroundSize: '100% 100%'}"
							@click="goPary">
							<view class="scenic-title">
								景区导航
							</view>
							<view class="scenic-text">
								寺庙位置 我的莲花灯
							</view>
						</view>
					</view>
					<view class="pary" :style="{background: `url(${imgPath}storage/home/pary_raiders.png)`}"></view>
				</view>
				<view class="gift">
					<view class="gift-img"
						:style="{background: `url(${imgPath}storage/home/gift_bg.png)`,backgroundSize: '100% 100%'}">
						纳福礼物
					</view>
				</view>
				<view class="commodity">
					<view class="commodity-item" v-for="item in productList">
						<view class="item-box" @click="goProductdetails(item.product_id)">
							<view class="commodity-img">
								<u--image :showLoading="true" :src="item.product_img" width="212rpx"
									height="212rpx"></u--image>
							</view>
							<view class="commodity-title">
								{{item.product_name}}
							</view>
							<view class="commodity-pay">
								<view class="money">
									¥{{item.product_price}}
								</view>
								<u--image :showLoading="true" :src="imgPath + 'storage/home/shopping_cart.png'"
									width="40rpx" height="40rpx"></u--image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPath: this.$store.state.user.baseURL,
				list: [],
				productList: [],
				minisystemInfo: ''
			}
		},
		onShareAppMessage(e) {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let currentPage = routes[routes.length - 1].route;
			let shareobj = {
				title: this.minisystemInfo.sub_title, //分享的标题
				path: currentPage, //好友点击分享之后跳转的页面
				imageUrl: this.minisystemInfo.url, //内容图片
			}
			return shareobj //一定要返回对象
		},

		onLoad() {
			this.getProduct()
			this.getBanner()
			this.minisystem()
		},
		methods: {
			goMap() {
				uni.navigateTo({
					url: '/subpackageA/templeMap/templeMap'
				})
			},
			goPary() {
				uni.switchTab({
					url: '/pages/templelist/templelist'
				})
			},
			goAnnouncement() {
				uni.navigateTo({
					url: '/subpackageB/announcement/announcement'
				})
			},
			getProduct() {
				this.$api.productlist({
					page: 1,
					limit: 3,
					is_hot: 1
				}).then(res => {
					// console.log(res);
					this.productList = res.data.list
				})
			},
			getBanner() {
				let params = {
					type: 2
				}
				this.$api.banner(params).then(res => {
					// console.log(res);
					this.list = res.data.list.map(item => item.img_url)
				})
			},
			minisystem() {
				let params = {}
				this.$api.minisystem(params).then(res => {
					this.minisystemInfo = res.data
					uni.setStorage({
						key: "minisystemInfo",
						data: res.data
					})
				})
			},
			goProductdetails(id) {
				uni.navigateTo({
					url: '/subpackageB/productdetails/productdetails?id=' + id
				})
			},
			goSesameoil() {
				uni.navigateTo({
					url: '/subpackageA/sesameoil/sesameoil'
				})
			},
			goMeritsrank() {
				uni.navigateTo({
					url: '/subpackageB/meritsrank/meritsrank'
				})
			},
			goTemplelist() {
				uni.navigateTo({
					url: '/subpackageB/templelist/templelist'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		// height: 100%;
	}

	.top {
		padding: 190rpx 30rpx 30rpx 30rpx;
	}

	.box {
		.scenic-spot {
			margin-top: 18rpx;
			padding: 44rpx 22rpx 38rpx 22rpx;
			box-sizing: border-box;
			height: 632rpx;
			background: #FEF1DC;
			border-radius: 16rpx;

			.temple {
				display: flex;
				justify-content: space-around;

				.temple-item {
					.temple-img {
						width: 106rpx;
						height: 102rpx;
					}

					.temple-title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 30rpx;
						color: #D06122;
						line-height: 42rpx;
						text-align: center;
						font-style: normal;
						padding-top: 12rpx;
					}
				}
			}

			.scenic {
				display: flex;
				justify-content: center;
				height: 140rpx;
				padding-top: 48rpx;

				.scenic-left,
				.scenic-right {
					box-sizing: border-box;
					border-radius: 16rpx;
					margin: 0 5rpx;
					height: 140rpx;
					flex: 1;
					background-color: #D06122;

					.scenic-title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 42rpx;
						font-style: normal;
					}

					.scenic-text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 28rpx;
						font-style: normal;
					}
				}

				.scenic-left {
					padding: 30rpx 0 0 26rpx;

					.scenic-title,
					.scenic-text {
						text-align: left;
					}

				}

				.scenic-right {
					padding: 30rpx 26rpx 0 0;

					.scenic-title,
					.scenic-text {
						text-align: right;
					}
				}
			}

			.pary {
				margin: 0 5rpx;
				margin-top: 16rpx;
				height: 190rpx;
			}
		}

		.gift {
			display: flex;
			justify-content: center;

			.gift-img {
				box-sizing: border-box;
				width: 410rpx;
				height: 100rpx;
				padding-top: 42rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #7E2E00;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
			}
		}

		.commodity {
			box-sizing: border-box;
			margin-top: 16rpx;
			// height: 382rpx;
			background: #FEF1DC;
			border-radius: 16rpx;
			padding: 6rpx 16rpx 16rpx 16rpx;
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;

			.commodity-item {
				width: calc(100% / 3);
				display: flex;
				justify-content: center;

				.item-box {
					margin-top: 10rpx;
					overflow: hidden;
					width: 212rpx;
					height: 350rpx;
					border-radius: 16rpx;
					border: 2rpx solid #E2C091;
				}

				.commodity-img {
					width: 212rpx;
					height: 212rpx;
				}

				.commodity-title {
					padding: 10rpx 16rpx;
					height: 68rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #111111;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}

				.commodity-pay {
					height: 40rpx;
					padding: 0 16rpx;
					display: flex;
					justify-content: space-between;

					.money {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #D06122;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}
	}
</style>